<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-col>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="料仓名称" prop="siloStockName">
            <el-input
              v-model="queryParams.siloStockName"
              placeholder="请输入料仓名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="物料名称" prop="siloMaterial">
            <el-input
              v-model="queryParams.siloMaterial"
              placeholder="请输入物料名称"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="是否在线" prop="isOnline">
              <el-select v-model="queryParams.isOnline" clearable placeholder="请选择料仓状态">
                  <el-option label="离线" value="0"></el-option>
                  <el-option label="在线" value="1"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="料仓模型" prop="siloConfId">
              <el-select v-model="queryParams.siloConfId" clearable placeholder="请选择料仓模型">
                  <el-option
                      v-for="item in siloConfList"
                      :key="item.siloConfId"
                      :label="item.siloConfName"
                      :value="item.siloConfId">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="修改时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['radarSilo:silo:add']"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['radarSilo:silo:update']"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['radarSilo:silo:remove']"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-hasPermi="['radarSilo:silo:import']"
            >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['radarSilo:silo:export']"
            >导出</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table border v-loading="loading" :data="siloList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="料仓编号" align="center" key="siloStockId" prop="siloStockId" v-if="columns[0].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="料仓名称" align="center" key="siloStockName" prop="siloStockName" v-if="columns[1].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="料仓模型名称" align="center" key="siloConfId" prop="siloConfId" v-if="columns[2].visible" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div 
              v-for="item in siloConfList"
              :key="item.siloConfId"
              ><span v-if="scope.row.siloConfId == item.siloConfId">{{ item.siloConfName }}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="物料名称" align="center" key="siloMaterial" prop="siloMaterial" v-if="columns[3].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="密度" align="center" key="siloDensity" prop="siloDensity" v-if="columns[4].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="高度" align="center" key="siloHeight" prop="siloHeight" v-if="columns[5].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="料仓过滤" align="center" key="coalData.jsonFilter" prop="coalData.jsonFilter" v-if="columns[6].visible" :show-overflow-tooltip="true"/>
          <el-table-column label="料仓状态" align="center" key="coalData.status" prop="coalData.status" v-if="columns[7].visible" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{ scope.row.coalData.status == "1"?"正在扫描":"未进行扫描" }}</div>
            </template>
          </el-table-column> 
          <!-- <el-table-column label="料仓状态" align="center" key="isOnline" prop="isOnline" v-if="columns[6].visible" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>{{ scope.row.isOnline == "1"?"在线":"离线" }}</div>
            </template>
          </el-table-column>  -->
          <el-table-column label="修改时间" align="center" prop="updateTime" v-if="columns[8].visible" width="160" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['radarSilo:silo:update']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['radarSilo:silo:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :close-on-click-modal="false" @close="closeDialog" :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="料仓编号" prop="siloStockId">
              <el-input v-model="form.siloStockId" disabled placeholder="请输入设备编号" maxlength="30" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="料仓名称" prop="siloStockName">
              <el-input v-model="form.siloStockName" placeholder="请输入料仓名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="料仓模型">
              <el-select v-model="form.siloConfId" placeholder="请选择料仓模型">
                  <el-option
                      v-for="item in siloConfList"
                      :key="item.siloConfId"
                      :label="item.siloConfName"
                      :value="item.siloConfId">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料名称" prop="siloMaterial">
              <el-input v-model="form.siloMaterial" placeholder="请输入物料名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密度" prop="siloDensity">
              <el-input v-model="form.siloDensity" placeholder="请输入密度" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="堆体体积常数" prop="baseData">
              <el-input v-model="form.baseData" placeholder="请输入堆体体积" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高度" prop="siloHeight">
              <el-input v-model="form.siloHeight" placeholder="请输入高度" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="垫底料体积" prop="bottomVolume">
              <el-input v-model="form.coalData.bottomVolume" placeholder="请输入垫底料体积" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="垫底料密度" prop="bottomDensity">
              <el-input v-model="form.coalData.bottomDensity" placeholder="请输入垫底料密度" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="料堆基准面" prop="ground">
              <el-input v-model="form.coalData.ground" placeholder="请输入料堆基准面" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输入旋转角度" prop="angle">
              <el-input v-model="form.coalData.angle" placeholder="请输入输入旋转角度" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="料仓过滤" prop="jsonFilter">
              <el-input v-model="form.coalData.jsonFilter" placeholder="请输入料仓过滤" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button class="right-button" @click="editFilter" size="small" type="primary">编辑</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="过滤参数" :visible.sync="filterOpen" width="800px" append-to-body>
      <el-form class="json-filter" ref="jsonFilter" :model="jsonFilter">
        <el-row>
          <el-col :span="6">
            <el-form-item label="z_max" prop="z_max">
              <el-input v-model="jsonFilter.z_max" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="z_min" prop="z_min">
              <el-input v-model="jsonFilter.z_min" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="default_z_max" prop="default_z_max">
              <el-input v-model="jsonFilter.default_z_max" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="default_z_min" prop="default_z_min">
              <el-input v-model="jsonFilter.default_z_min" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="in_cylinder_radius" prop="in_cylinder_radius">
              <el-input v-model="jsonFilter.in_cylinder_radius" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cylinder_x" prop="in_cylinder_x">
              <el-input v-model="jsonFilter.in_cylinder_x" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cylinder_y" prop="in_cylinder_y">
              <el-input v-model="jsonFilter.in_cylinder_y" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cone_thea" prop="out_cone_thea">
              <el-input v-model="jsonFilter.out_cone_thea" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="out_cone_height" prop="out_cone_height">
              <el-input v-model="jsonFilter.out_cone_height" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cone_x" prop="out_cone_x">
              <el-input v-model="jsonFilter.out_cone_x" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cone_y" prop="out_cone_y">
              <el-input v-model="jsonFilter.out_cone_y" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cone_z" prop="out_cone_z">
              <el-input v-model="jsonFilter.out_cone_z" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="out_cylinder_radius" prop="out_cylinder_radius">
              <el-input v-model="jsonFilter.out_cylinder_radius" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cylinder_x" prop="out_cylinder_x">
              <el-input v-model="jsonFilter.out_cylinder_x" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="out_cylinder_y" prop="out_cylinder_y">
              <el-input v-model="jsonFilter.out_cylinder_y" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cone_thea" prop="in_cone_thea">
              <el-input v-model="jsonFilter.in_cone_thea" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="in_cone_height" prop="in_cone_height">
              <el-input v-model="jsonFilter.in_cone_height" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cone_x" prop="in_cone_x">
              <el-input v-model="jsonFilter.in_cone_x" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cone_y" prop="in_cone_y">
              <el-input v-model="jsonFilter.in_cone_y" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="in_cone_z" prop="in_cone_z">
              <el-input v-model="jsonFilter.in_cone_z" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFilter">确 定</el-button>
        <el-button @click="cancelFilter">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设备导入对话框 -->
    <el-dialog :title="upload.title" :close-on-click-modal="false" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的设备数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectSiloList, addSilo, updateSilo, delSilo } from "@/api/radar/radarSilo";
import { selectSiloConfList } from "@/api/radar/radarSiloConf";

import { getToken } from "@/utils/auth";

import * as echarts from "echarts";
import moment from 'moment'

export default {
  name: "silo",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      selectList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 料仓表格数据
      siloList: null,
      //料仓模型数据
      siloConfList: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      //过滤编辑弹窗
      filterOpen:false,
      jsonFilter:{
        z_max:'100',
        z_min:'-100',
        default_z_max:'100',
        default_z_min:'-100',
        in_cylinder_radius:'none',
        in_cylinder_x:'none',
        in_cylinder_y:'none',
        out_cone_thea:'none',
        out_cone_height:'none',
        out_cone_x:'none',
        out_cone_y:'none',
        out_cone_z:'none',
        out_cylinder_radius:'none',
        out_cylinder_x:'none',
        out_cylinder_y:'none',
        in_cone_thea:'none',
        in_cone_height:'none',
        in_cone_x:'none',
        in_cone_y:'none',
        in_cone_z:'none',
      },
      // 表单参数
      form: {
        coalData:{
          baseData : 0,
          angle : 0,
          ground:0,
          type:0,
          bottomDensity : 1,
          bottomVolume : 1,
        },
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/radarSilo/importData"
      }, 
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        siloStockName: undefined,
        siloConfId: undefined,
        siloMaterial:undefined,
        isOnline: undefined,
        startTime: undefined,
        endTime: undefined
      },
      // 列信息
      columns: [
        { key: 0, label: `料仓编号`, visible: true },
        { key: 1, label: `料仓名称`, visible: true },
        { key: 2, label: `料仓模型名称`, visible: true },
        { key: 3, label: `物料名称`, visible: true },
        { key: 4, label: `密度`, visible: true },
        { key: 5, label: `高度`, visible: true },
        { key: 6, label: `料仓过滤`, visible: true },
        { key: 7, label: `料仓状态`, visible: true },
        { key: 8, label: `修改时间`, visible: true }
      ],
      // 表单校验
      rules: {
        // equipName: [
        //   { required: true, message: "设备名称不能为空", trigger: "blur" },
        //   { min: 0, max: 20, message: '设备名称长度必须介于 0 和 20 之间', trigger: 'blur' }
        // ],
      }
    };
  },
  watch: {
  },
  created() {
    this.getList();
    this.getSiloConfList();
  },
  methods: {
    /** 查询数据列表 */
    getList() {
      this.loading = true;
      if(this.dateRange.length > 0){
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      } 
      selectSiloList(this.queryParams).then(res => {
          this.siloList = res.data.siloData;
          var coalList = res.data.coalData.list;
          for(var i = 0;i < this.siloList.length;i++){
            var index = coalList.filter(item => item.id === this.siloList[i].siloStockId);
            // console.log("?????????????",index)
            if(index.length >= 1){
              this.siloList[i].coalData = index[0]
            }else{
              this.siloList[i].coalData = {};
            }
          }
          this.total = res.data.total;
          this.loading = false;
        }
      );
    },
    getSiloConfList(){
      selectSiloConfList({type:"1"}).then(res =>{
        this.siloConfList = res.data.data
        // console.log(this.siloConfList)
      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    closeDialog(){
      this.jsonFilter={
        z_max:'100',
        z_min:'-100',
        default_z_max:'100',
        default_z_min:'-100',
        in_cylinder_radius:'none',
        in_cylinder_x:'none',
        in_cylinder_y:'none',
        out_cone_thea:'none',
        out_cone_height:'none',
        out_cone_x:'none',
        out_cone_y:'none',
        out_cone_z:'none',
        out_cylinder_radius:'none',
        out_cylinder_x:'none',
        out_cylinder_y:'none',
        in_cone_thea:'none',
        in_cone_height:'none',
        in_cone_x:'none',
        in_cone_y:'none',
        in_cone_z:'none',
      }
    },
    // 表单重置
    reset() {
      this.form = {
        coalData:{
          baseData : 0,
          angle : 0,
          ground:0,
          type:0,
          bottomDensity : 1,
          bottomVolume : 1,

        },
        // siloStockId: undefined,
        // siloStockName: undefined,
        // siloConfId: undefined,
        // siloMaterial: undefined,
        // siloDensity: undefined,
        // siloHeight: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime=undefined;
      this.queryParams.endTime=undefined;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectList = selection;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.coalData.jsonFilter = JSON.stringify(this.jsonFilter);
      this.open = true;
      this.title = "添加料仓";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = JSON.parse(JSON.stringify(this.selectList[0] || row));
      if(this.form.coalData.jsonFilter == undefined) this.form.coalData.jsonFilter = JSON.stringify(this.jsonFilter);
      // this.jsonFilter = JSON.parse()
      this.open = true;
      this.title = "修改料仓";
    },
    /** 提交按钮 */
    submitForm: function() {
      var siloStockIdList = this.siloList.map(item => item.siloStockId);
      var coalData = this.form.coalData;
      this.form.jsonFilter = coalData.jsonFilter;
      this.form.baseData = coalData.baseData;
      this.form.angle = coalData.angle;
      this.form.bottomDensity = coalData.bottomDensity;
      this.form.bottomVolume = coalData.bottomVolume;
      this.$refs["form"].validate(valid => {
        if (valid) {
          var nameNum = siloStockIdList.filter(item => item === this.form.siloStockId).length
          if(nameNum > 1){
            return this.$modal.msgError("料仓编号不可重复");
          }
          if (this.form.siloStockId != undefined) {
            updateSilo(this.form).then(response => {
              if(response.msg != "操作失败"){
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }else{
                this.$modal.msgError("料仓编号不可重复");
              }
            });
          } else {
            if(siloStockIdList.includes(this.form.siloStockId)){
              return this.$modal.msgError("料仓编号不可重复");
            }
            addSilo(this.form).then(response => {
              if(response.msg != "操作失败"){
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }else{
                this.$modal.msgError("料仓编号不可重复");
              }
            });
          }
        }
      });
    },
    editFilter(){
      if(this.form.coalData.jsonFilter != undefined) this.jsonFilter = JSON.parse(this.form.coalData.jsonFilter);
      this.filterOpen = true;
    },
    submitFilter(){
      this.form.coalData.jsonFilter = JSON.stringify(this.jsonFilter);
    },
    cancelFilter(){
      this.filterOpen = false;

    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const siloStockIds = row.siloStockId || this.selectList.map(item => item.siloStockId);
      // const equipNames = row.equipName || this.selectList.map(item => item.equipName);
      this.$modal.confirm('是否确认删除编号为"' + siloStockIds + '"的数据项？').then(function() {
        return delSilo(siloStockIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('radarSilo/export', {
        ...this.queryParams
      }, `silo_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "料仓导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('radarSilo/importTemplate', {
      }, `radar_silo_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    
  }
};
</script>

<style lang="scss" scoped>
.his-chart {
  width: 550px;
  height:500px;
}
#imageMap{
  height: 500px;
}
.right-button{
  // margin-top:10px;
  width:65px;
  float: right;
  font-size: 14px;
}
.el-button--success {
  color: #fff;
  background-color: #0084c5;
  border-color: #086df0;
}
.el-button--primary:focus, .el-button--primary:hover {
  background: #65a5f9;
  border-color: #65a5f9;
  color: #fff;
}
::v-deep .json-filter .el-input{
  width:98%;
}

</style>